﻿
<div ng-repeat="ci in ciCtrl.controversyIndicators">
    <div class="table-vert">
        <div class="table-vert-cell">
        <div id="{{ci.id}}" class="title-18-bold">{{ ci.name }}</div>
    </div>
        <div class="table-vert-cell">
        <div ng-if="ci.answerCategory > 0">
                <div class="sidebar-table-left no-border">
                    <div class="orange-number-bubble border{{ ci.answerCategory }} ng-binding">
                        {{ ci.answerCategory }}
                    </div>
                </div>
                <div class="sidebar-table-right no-border">
                    <div class="title-black-border">Category {{ ci.answerCategory }} - {{ ci.eventSeverity }}</div>
                    <div class="table-3" style="margin-top: 9px;">
                        <div class="table-row-3" ng-repeat="ei in ci.eventIndicators | orderBy:'name'">
                            <div ng-if="ei.answerCategory > 0" class="table-cell-3 width_130_2 no-border" style="font-weight: normal;">{{ ei.name }}</div>
                        </div>
                    </div>
                </div>
                <div class="clear">&nbsp;</div>
            </div>
            <div ng-if="ci.answerCategory == 0">
                No evidence of relevant controversies
            </div>
        </div>
        <div class="table-vert-cell" ng-if="ci.answerCategory > 2">
            <div ng-if="ci.answerCategory > 0">
                <div class="sidebar-table-left no-border">
                    <div class="trend-arow-large trend-arow-{{ ci.outlookScore }}">&nbsp;</div>
                </div>
                <div class="sidebar-table-right no-border">
                    <div class="title-black-border">
                        Outlook
                    </div>
                    <ul class="esg-ratings_black">
                        <li>{{ ci.outlookAssessment }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
            </div>
    <div class="border-spacer"></div>
</div>

<div>&nbsp;</div>

<div ng-if="ciCtrl.hasControversyIndicatorTabs">

    <div class="tabs-users-2" id="scrollToDetail">
        <ul>
            <li id="ribbon_{{$index}}" class="tabs-users-2-25" ng-repeat="ci in ciCtrl.controversyIndicators">
                <a href="" ng-click="ciCtrl.selectControversyIndicator(ci)" ng-class="{ active: ci.id == ciCtrl.selectedControversyIndicator.id }">{{ ci.name }}</a>
            </li>
        </ul>
        <div class="clear"></div>
    </div>

<div ng-if="ciCtrl.selectedControversyIndicator.answerCategory == 0">
    <div style="float: left; width: 300px; margin-top: 22px;">
        No evidence of relevant controversies
    </div>
</div>


<div ng-if="ciCtrl.selectedControversyIndicator.answerCategory > 0">
    <div class="row-fluid" style="padding-top: 15px;">
        <div class="col-md-3">
            <div class="sidebar-table-left no-border" style="width: 80px;">
                <div class="orange-number-bubble border3 ng-binding">
                    {{ ciCtrl.selectedControversyIndicator.answerCategory }}
                </div>
            </div>
            <div class="sidebar-table-right no-border" style="width: 120px;">
                <div class="title-black-border no-border" style="padding-top: 15px;">Category {{ ciCtrl.selectedControversyIndicator.answerCategory }} -<br />{{ ciCtrl.selectedControversyIndicator.eventSeverity }}</div>
                <div class="table-3" style="margin-top: 9px;">
                    <div class="table-row-3" ng-repeat="ei in ind.eventIndicators">
                        <div class="table-cell-3 width_130_2 no-border" style="font-weight: normal;">{{ ciCtrl.selectedControversyIndicator.name }}</div>
                    </div>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="col-md-3">
            <div ng-if="ciCtrl.selectedControversyIndicator.answerCategory > 2">
                <div class="sidebar-table-left no-border" style="width: 90px;">
                    <div class="trend-arow-large trend-arow-{{ ciCtrl.selectedControversyIndicator.outlookScore }}">&nbsp;</div>
                </div>
                <div class="sidebar-table-right no-border" style="width: 120px;">
                    <div class="title-black-border no-border" style="padding-bottom: 0; padding-top: 15px;">
                        Outlook
                    </div>
                    <ul class="esg-ratings_black" style="padding-top: 0;">
                        <li>{{ ciCtrl.selectedControversyIndicator.outlookAssessment }}</li>
                    </ul>
                </div>
            </div>
        </div>        
        <div class="col-md-6">
            <div class="bubble-graph-container">
                <div class="bubble-graph-top">
                    <div class="bubble-graph-top-left">
                        Related Events
                    </div>
                    <div class="bubble-graph-top-right">
                        <ul>
                            <li><div class="orange-bubble-border border1">1</div></li>
                            <li><div class="orange-bubble-border border2">2</div></li>
                            <li><div class="orange-bubble-border border3">3</div></li>
                            <li><div class="orange-bubble-border border4">4</div></li>
                            <li><div class="orange-bubble-border border5">5</div></li>
                        </ul>
                    </div>
                    <div class="clear">&nbsp;</div>
                </div>
                <div class="bubble-graph-bottom" ng-repeat="ei in ciCtrl.selectedControversyIndicator.eventIndicators">
                    <div class="bubble-graph-bottom-left">
                        <a href="" ng-click="ciCtrl.selectEventIndicatorAndScroll(ei,true)" ng-if="ei.answerCategory > 0">{{ ei.name }}</a>
                        <span ng-if="ei.answerCategory == 0">
                            {{ ei.name }}
                        </span>
                    </div>
                    <div class="bubble-graph-bottom-right">
                        <div class="bublle-slider slide-{{ei.answerCategory}}" ng-if="ei.answerCategory > 0">
                            <div class="bubble-slider-line"></div>
                            <div class="bubble-slider-circle"></div>
                            <div class="clear"></div>
                        </div>
                        <div ng-if="ei.answerCategory == 0">
                            <b>None</b>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="bubble-graph-bottom">
                    <div class="bubble-graph-bottom-left">
                        <b>Overall Controversy Level</b>
                    </div>
                    <div class="bubble-graph-bottom-right">
                        <div class="bublle-slider slide-{{ciCtrl.overallControversyLevel}}">
                            <div class="bubble-slider-line"></div>
                            <div class="bubble-slider-circle"></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear">&nbsp;</div>
                </div>                
            </div>
        </div>
        <div class="clear"></div>
        <div style="font-weight: bold; margin-bottom: 10px;">
            Based on our event level assessment of impact and risk as {{ ciCtrl.selectedControversyIndicator.eventSeverity | lowercase }}, the company has been assigned an overall controversy assessment of category {{ciCtrl.overallControversyLevel}}.
        </div>
    </div>
</div>

    <div ng-if="ciCtrl.selectedControversyIndicator.answerCategory > 0 && ciCtrl.selectedControversyIndicator.eventIndicators.length > 0">
        <div class="tabs-users-2">
            <ul>
                <li id="ribbon_{{$index}}" class="tabs-users-2-25" ng-repeat="ei in ciCtrl.selectedControversyIndicator.eventIndicators">
                    <a href="" ng-click="ciCtrl.selectEventIndicator(ei)" ng-class="{ active: ei.id == ciCtrl.selectedEventIndicator.id }">{{ ei.name }}</a>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
    </div>

<div ng-include="'/Views/Research/Controversies/Common/EventIndicator.html'"></div>

</div>


